<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{conut}}</strong></span>
    <ul class="filters">
      <li>
        <a 
        :class="{selected:getSel==='all'}" 
         href="javascript:;"
        @click="$emit('changeType', 'all')"
        >全部</a>
      </li>
      <li>
        <a  
        :class="{selected:getSel==='no'}" 
         href="javascript:;"
          @click="$emit('changeType','no')"
         >未完成</a>
      </li>
      <li>
        <a 
        :class="{selected:getSel==='yes'}"
         href="javascript:;"
         @click="$emit('changeType','yes')"
         >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearfn">清除已完成</button>
  </footer>
</template>getSel

<script>
export default {
  props: ['farr','getSel'],

computed: {
    conut() {
      return this.farr.length;
    },
  },
  methods:{
    //清空已完成任务的
    clearfn(){
this.$emit('clear')
    }
  }
  
};
</script>